<!--
 * @Author: songxinfeng
 * @Date: 2025/1/15
 * @Description: CRM系统侧边栏导航组件
-->
<template>
  <div class="sidebar">
    <div class="nav-menu">
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        router
        background-color="#304156"
        text-color="#bdc3c7"
        active-text-color="#ffffff"
      >
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu index="customer">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/customers">客户列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="clue">
          <template #title>
            <el-icon><Search /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="/clues">线索列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="visit">
          <template #title>
            <el-icon><Calendar /></el-icon>
            <span>拜访管理</span>
          </template>
          <el-menu-item index="/visits">拜访列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/users">用户管理</el-menu-item>
          <el-menu-item index="/user-logs">操作日志</el-menu-item>
          <el-menu-item index="/departments">部门管理</el-menu-item>
          <el-menu-item index="/roles">角色管理</el-menu-item>
          <el-menu-item index="/permissions">权限管理</el-menu-item>
          <el-menu-item index="/industries">行业管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/about">
          <el-icon><InfoFilled /></el-icon>
          <span>关于系统</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  House,
  User,
  Search,
  Calendar,
  Setting,
  InfoFilled
} from '@element-plus/icons-vue'

const route = useRoute()

const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.sidebar {
  width: 100%;
  height: 100vh;
  background-color: #304156;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav-menu {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.sidebar-menu {
  border-right: none;
  height: 100vh;
  background-color: #304156;
  margin: 0;
  padding: 0;
  width: 100%;
}

.sidebar-menu .el-menu-item,
.sidebar-menu .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding-left: 20px;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #409eff !important;
  color: #ffffff !important;
}

.sidebar-menu .el-sub-menu .el-menu-item.is-active {
  background-color: #337ecc !important;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  padding-left: 40px;
}
</style>
